import { defineComponent, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { useTabsStore } from '@/stores/modules/tabs'
import MessageBox from '@/components/nComponents/MessageBox'
import { NButton, NBreadcrumb, NBreadcrumbItem, NForm, NFormItem, NInput } from 'naive-ui'
import type { lockState } from '@/types/stores/tabs'
import type { FormInst } from 'naive-ui'

export default defineComponent({
  setup() {
    const tabsStore = useTabsStore()
    const {
      getHistory: historyList,
      getLocaks: locks,
      getLeavelOne: leavelOne,
    } = storeToRefs(tabsStore)
    const { lockRouter, unlock, setCurrenName, setLeaverOne } = tabsStore

    const router = useRouter()

    /**
     *  解锁
     * */
    const handLast = (index: number) => {
      const info: lockState = locks.value[index]
      const name = info.childer.at(-1).name
      setLeaverOne(info.leavelOne)
      setCurrenName(info.currrenName)
      unlock(index)
      router.push({
        name,
      })
    }
    /**
     *  锁分组路由缓存
     * */

    const suoShow = ref(false)
    const formRef = ref<FormInst | null>(null)
    interface formValueState {
      name: string
    }
    const formValue = ref<formValueState>({
      name: '',
    })
    const rules = {
      name: {
        required: true,
        message: '请输入备注',
        trigger: 'blur',
      },
    }
    const handSou = () => {
      const name = deepClone(historyList.value)
        .map((el) => {
          return el.meta.title
        })
        .join('-')
      formValue.value.name = name
      suoShow.value = true
    }
    const handSave = () => {
      formRef.value?.validate((errors) => {
        if (!errors) {
          lockRouter(formValue.value.name, leavelOne.value)
          suoShow.value = false
        }
      })
    }
    return () => (
      <>
        <div class="flex items-center ml-10">
          {locks.value.map((item, index: number) => (
            <>
              <div class="drow">
                <NButton class="ml5" type="primary" onClick={() => handLast(index)}>
                  {item.name}
                </NButton>
              </div>
            </>
          ))}
          <div style="margin-right: 5px">
            <NBreadcrumb class="nav-breadcrumb" separator=">">
              {historyList.value.map((item) => (
                <NBreadcrumbItem>
                  <div class="nav-breadcrumb-span">
                    {item.meta.icon && <i class={`esayIcon esayIcon-${item.meta.icon}`}></i>}
                    {item.meta.title && <span class="ml-1">{item.meta.title}</span>}
                  </div>
                </NBreadcrumbItem>
              ))}
            </NBreadcrumb>
          </div>
          <div class="suo ml-[10px] cursor-pointer" onClick={handSou}>
            <i class="esayIcon esayIcon-suoding"></i>
          </div>
        </div>
        <MessageBox v-model={suoShow.value} title="暂存分组" isClose>
          <>
            <NForm ref={formRef} label-width={80} model={formValue.value} rules={rules}>
              <NFormItem label="备注" path="name">
                <NInput v-model:value={formValue.value.name} placeholder="请输入暂存租备注" />
              </NFormItem>
            </NForm>
            <div class="btns flex align-center justify-end">
              <NButton
                onClick={() => {
                  suoShow.value = false
                }}
              >
                取消
              </NButton>
              <NButton style={{ marginLeft: '10px' }} type="primary" onClick={handSave}>
                提交
              </NButton>
            </div>
          </>
        </MessageBox>
      </>
    )
  },
})
